<template>
    <el-space class="UserLayer" :size="10" :spacer="spacer">
        <div class="UserItem">
            <el-button link>
                <el-icon>
                    <Setting />
                </el-icon>
            </el-button>
            <el-select v-model="value" class="m-2" placeholder="Select" size="small">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button link>
                <el-icon>
                    <Plus />
                </el-icon>
            </el-button>
            <el-button link>
                <el-icon>
                    <Delete />
                </el-icon>
            </el-button>
        </div>
        <div class="UserItem">
            <el-button type="danger" size="small" :icon="RefreshRight">历史快照</el-button>
            <el-button link>
                <el-icon>
                    <CircleCloseFilled />
                </el-icon>
            </el-button>
            <el-button link>
                <el-icon>
                    <Delete />
                </el-icon>
            </el-button>
        </div>
        <div class="UserItem">
            <el-button link>
                <el-icon>
                    <CirclePlus />
                </el-icon>
            </el-button>
        </div>
        <div class="UserItem">
            <el-button link>
                <el-icon>
                    <UserFilled />
                </el-icon>
            </el-button>
        </div>
        <div class="UserItem">
            <el-button link style="margin: 0 8px 0 0;">
                <el-icon>
                    <BellFilled />
                </el-icon>
            </el-button>
            <el-button class="UserButton" circle color="#FFF">
                <el-icon>
                    <Avatar />
                </el-icon>
            </el-button>
        </div>
    </el-space>
</template>
<script setup>
import { CirclePlus, Setting, Delete, Avatar, BellFilled, UserFilled, Plus, RefreshRight, CircleCloseFilled } from '@element-plus/icons-vue'
import { ref, h } from 'vue'
const spacer = h(ElDivider, { direction: 'vertical', style: { height: '48px' } })
const value = ref('')

const options = [
    { value: 'Option1', label: 'Option1', },
    { value: 'Option2', label: 'Option2', },
    { value: 'Option3', label: 'Option3', },
    { value: 'Option4', label: 'Option4', },
    { value: 'Option5', label: 'Option5', },
]
</script>
<style lang="less" scoped>
:deep(.el-button+.el-button) {
    margin-left: 6px;
}

.UserItem {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.UserButton {
    width: 18px;
    height: 18px;
}

.UserLayer {
    height: 48px;
    width: 100%;
    background: linear-gradient(to right, rgb(120, 15, 50) 0%, rgb(160, 20, 70) 30%, rgb(40, 3, 16) 100%);
    border-bottom: solid 1px var(--el-menu-border-color);
    display: flex;
    justify-content: flex-end;
}

:deep(.el-input__wrapper) {
    box-shadow: none;
    border-bottom: solid 1px rgba(255, 255, 255, 0.5);
    border-radius: 0;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
    box-shadow: none !important;
    border-bottom: solid 1px var(--el-color-primary);
    border-radius: 0;
}

:deep(.el-select .el-input__wrapper.is-focus) {
    box-shadow: none !important;
    border-bottom: solid 1px var(--el-color-primary);
    border-radius: 0;
}

:deep(.el-input__wrapper:hover) {
    box-shadow: none !important;
    border-bottom: solid 1px rgba(255, 255, 255, 0.5);
}

:deep(.el-divider--vertical) {
    margin: 0 2px;
}

.m-2 {
    width: 100px;
    border: none;
    margin: 0 8px;
}
</style>